<script lang='ts' setup>
import { onMounted, ref, watch } from 'vue';
import PreviewSlideItem from './PreviewSlideItem.vue';
import { useRoute, } from 'vue-router';
const props = withDefaults(defineProps<{ slideItem: any, level?: number }>(), {
    slideItem: () => ({} as any),
    level: 1
});
const emits = defineEmits<{
    (e: 'returnOpenDict', currentExpand: number): void
}>();
const route = useRoute();

const currentExpand = ref<number>(0);
/**
 * 判断当前展开的条目ID是否与传入的ID相同
 *
 * @param id 要比较的ID
 * @returns 如果当前展开的条目ID与传入的ID相同，则返回true，否则返回false
 */
function isCurrentExpand(id: number) {
    return currentExpand.value == id;
}

/**
 * 点击菜单后，展开菜单文件夹
 *
 * @param id 要展开或关闭的菜单项的 ID
 */
function expandThisDict(id: number) {
    if (currentExpand.value == id) {
        currentExpand.value = 0;
    } else {
        currentExpand.value = id;
    }
}

/**
 * 自动展开父级菜单项
 *
 * 遍历寻找与当前路由路径相同的菜单项，并将此菜单项的父级菜单展开。
 */
function autoExpandParentDict() {
    // 遍历寻找routepath和当前路由相同的菜单项，并将此菜单项的父级菜单id，展开菜单项
    findMenuItemByPath(route.fullPath)
}


/**
 * 根据路径或ID查找菜单项
 *
 * @param pathOrId 路径或ID，类型为字符串或数字
 */
function findMenuItemByPath(pathOrId: string | number) {

    let menuItem = props.slideItem;
    if (menuItem.children && menuItem.children.length > 0) {
        for (let i = 0; i < menuItem.children.length; i++) {
            if (typeof pathOrId == 'string' && menuItem.children[i].fullPath == pathOrId ||
                typeof pathOrId == 'number' && menuItem.children[i].id == pathOrId) {
                currentExpand.value = menuItem.id;
                emits('returnOpenDict', menuItem.id);
                return
            }
        }
    } else {
        return
    }

}

/**
 * 通过子项返回的id，展开父级菜单
 *
 * @param id 子项id
 */
function returnedOpenDict(id: number) {
    // 通过子项返回的id，展开父级菜单
    findMenuItemByPath(id)
}


const currentLevel = ref<number>(0);
watch(() => props.level, (val: number) => {
    currentLevel.value = val;
}, {
    immediate: true
})
onMounted(() => {
    autoExpandParentDict();
});
</script>
<template>
    <router-link active-class="navItem_active" class="navItem" :style="{ 'padding-left': (currentLevel * 10) + 'px' }"
        v-if="!slideItem.children || slideItem.children.length == 0" :to="slideItem.fullPath" :key="slideItem.url">
        <el-icon style="margin-right: 2px;">
            <component :is="slideItem.icon" />
        </el-icon>
        {{ slideItem.label }}
    </router-link>
    <!-- 多级菜单文件夹 -->
    <div v-else :class="{ 'navItem': true, 'navItemDict': true, 'notExpandDict': !isCurrentExpand(slideItem.id) }"
        :style="{ height: ((slideItem.children.length + 1) * 41) + 'px' }">
        <span class="navItemDictLabel" :style="{ 'padding-left': (currentLevel * 10) + 'px' }">
            <el-icon @click="expandThisDict(slideItem.id)" style="margin-right: 5px;">
                <component :is="slideItem.icon" />
            </el-icon>

            <span @click="expandThisDict(slideItem.id)">{{ slideItem.label }}</span>
            <el-icon style="position: absolute;right:5px;" @click="expandThisDict(slideItem.id)">
                <ArrowDown
                    :style="{ transform: `rotate(${isCurrentExpand(slideItem.id) ? -180 : 0}deg)`, transition: 'transform 0.2s ease-in-out' }" />
            </el-icon>
        </span>
        <preview-slide-item :slideItem="i" v-for="i in slideItem.children" :level="currentLevel + 1"
            @returnOpenDict="returnedOpenDict" />
    </div>
</template>
<style scoped lang='scss'>
.navItem {
    min-width: 140px;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    height: 41px;
    color: white;
    display: block;
    vertical-align: middle;

    &:hover {
        background-color: var(--theme-color-background-hover);
        color: white;
    }

    &_active {
        background-color: var(--theme-color);
        width: 100%;

        &:hover {
            background-color: var(--theme-color-hover);
        }
    }
}

.navItemDict {
    transition: all 0.2s ease-in-out;

    padding: 0 !important;

    &Label {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 41px;
        line-height: 41px;
        padding: 0 15px;

        span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-grow: 1;
        }
    }

    &:has(> .navItem_active) {
        background-color: #2e2e2e;
    }
}

.notExpandDict {
    height: 41px !important;
    overflow: hidden !important;
}
</style>